<template>
  <div class="conent">
    <!-- 顶部导航栏 -->
    <Topnav titleTExt="编辑资料" />
    <!-- 用户头像 -->
    <div class="user_img">
      <img v-if="userInfo.head_img" :src="$axios.defaults.baseURL+userInfo.head_img" alt />
      <img
        v-else
        src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2103755331,3068281572&fm=26&gp=0.jpg"
        alt
      />
      <van-uploader :after-read="afterRead" />
    </div>
    <Navbar labeltext="昵称" :infotext="userInfo.nickname" @barClick="showNicknsme = true" />
    <Navbar labeltext="密码" infotext="*****" @barClick="showPassword=true" />
    <Navbar labeltext="性别" :infotext="userInfo.gender==1?'男':'女'" @barClick="showGender=true" />

    <!-- 修改昵称的弹窗 -->
    <van-dialog v-model="showNicknsme" title="修改昵称" show-cancel-button @confirm="setNickname">
      <van-field v-model="newNicknsme" placeholder="请输入新昵称" />
    </van-dialog>
    <!-- 修改密码的弹窗 -->
    <van-dialog v-model="showPassword" title="修改密码" show-cancel-button @confirm="setPassword">
      <van-field v-model="newPassword" placeholder="请输入新密码" />
    </van-dialog>
    <!-- 修改性别的动作面板 -->
    <van-action-sheet
      v-model="showGender"
      :actions="actions"
      @select="onSelect"
      cancel-text="取消"
      @cancel="$toast.success('取消')"
    />
  </div>
</template>

<script>
import Navbar from "@/components/Navbar";
import Topnav from "@/components/Topnav";

export default {
  data() {
    return {
      userInfo: {},
      // 是否显示编辑昵称的弹窗
      showNicknsme: false,
      // 是否显示编辑密码的弹窗
      showPassword: false,
      // 是否显示性别的弹窗
      showGender: false,
      // 用户昵称
      newNicknsme: "",
      // 用户密码
      newPassword: "",
      // 性别 弹框的选项， 对象的数据可以随意增加修改的
      actions: [
        { name: "男", gender: 1 },
        { name: "女", gender: 0 }
      ]
    };
  },
  methods: {
    // 封装获取用户详情的方法
    loadPage() {
      const token = localStorage.getItem("token");
      const id = localStorage.getItem("userId");
      this.$axios({
        url: "/user/" + id,
        method: "GET"
      }).then(res => {
        console.log(res);
        const { message, data } = res.data;
        if (message === "获取成功") {
          this.userInfo = data;
        }
      });
    },
    // 封装修改用户信息的方法
    handleEdit(data) {
      const token = localStorage.getItem("token");
      const id = localStorage.getItem("userId");
      console.log(this.newNicknsme);
      this.$axios({
        url: "/user_update/" + id,
        method: "post",
        data
      }).then(res => {
        console.log(res);
        const { message, data } = res.data;
        if (message === "修改成功") {
          // this.newNicknsme = nickname;
          this.loadPage();
          this.$toast.success("修改成功");
        }
      });
    },
    // 修改用户昵称
    setNickname() {
      this.handleEdit({ nickname: this.newNicknsme });
    },
    // 修改用户密码
    setPassword() {
      this.handleEdit({ nickname: this.newPassword });
    },
    // 修改性别
    onSelect(item) {
      console.log(item);

      this.handleEdit({ gender: item.gender });
      this.showGender = false;
    },
    // 上传头像
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
      const fd = new FormData();
      fd.append("file", file.file);
      this.$axios({
        url: "/upload",
        method: "POST",
        data: fd
      }).then(res => {
        console.log(res);
        const { message, data } = res.data;
        if (message === "文件上传成功") {
          this.handleEdit({ head_img: data.url });
        }
      });
    }
  },
  components: {
    Navbar,
    Topnav
  },
  // 这个钩子函数是创建完毕，数据准备完毕，但是dom 还没有
  created() {
    this.loadPage();
  }
};
</script>


<style lang="less" scoped>
.user_img {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  height: 44.444vw;
  img {
    width: 19.444vw;
    height: 19.444vw;
    border-radius: 50%;
  }
  .van-uploader {
    position: absolute;
    opacity: 0;
  }
}
</style>